import { reactive } from "../../reactive";
import { effect, depsMap } from "../../effect/effect";

const state = reactive({
  a: 123,
  b: 456,
  c: 789,
});

effect(() => {
  state.a;
  console.log("fn1被执行啦");
  console.log("-----------------");
});
effect(() => {
  state.a;
  console.log("fn2被执行啦");
  console.log("-----------------");
});
state.a = 2;
// 发现出现了无限循环的bug

// 1. 一开始fn1和fn2都会收集a
// 2. 当a的值改变时，去触发a依赖的fn：fn1和fn2
// 3. 先触发fn1：清空对fn1的依赖，此时的a依赖的fn就只有fn2，然后重新执行fn1，此时a依赖的fn就变为了[fn2,fn1]
// 4. 先触发fn2：清空对fn2的依赖，此时的a依赖的fn就只有fn1，然后重新执行fn2，此时a依赖的fn就变为了[fn1,fn2]
// 5. 依赖触发发现a依赖的函数的集合不为空，还需要继续执行（因为此时a依赖的是[fn1,fn2]）
// 6. 因此又会循环执行步骤3和4
